<template>
  <div class="w-100 h-100">
    <div class="top d-flex justify-content-between">
      <div>
        <span>植被覆盖总面积:</span>
        <span style="color: #3cc4eb">{{ area }}万公顷</span>
      </div>
      <div>
        <span>植被率:</span>
        <span style="color: #b8eb8f">{{ fgv }}%</span>
      </div>
    </div>
    <div class="bottom">
      <div id="zbfgl" style="width: 100%; height: 100%"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
const jsonData: any = inject("jsonData");
let diff:any
const area = ref(0);
const fgv = ref(0);
const props = defineProps({
  echartsData: {
    type: Array,
    default: () => [],
  },
});


onMounted(() => {
  diff=props.echartsData
  let option = {
  background: "transeparent",

  tooltip: {
    show: true,
    trigger: "item",
    padding: [8, 15],
    backgroundColor: "rgba(28,64,81,0.7)",
    borderColor: "transparent",
    textStyle: {
      color: "white",
      fontSize: 20,
    },
  },
  legend: { show: false },
  grid: { left: "22%", right: "12%", top: "5%", bottom: "3%" },
  xAxis: [
    {
      splitLine: { show: false },
      type: "value",
      show: false,
      axisLine: {
        //x轴坐标轴，false为隐藏，true为显示
        show: false,
      },
    },
  ],
  yAxis: [
    {
      show: true,
      splitLine: { show: false },
      axisLine: { show: false },
      type: "category",
      axisTick: { show: false },
      inverse: true,
      axisLabel: { show: false },
    },
    {
      type: "category",
      inverse: true,
      axisTick: "none",
      axisLine: "none",
      show: true,
      axisLabel: {
        textStyle: {
          fontSize: 20,
          color: "#667A8E",
        },
        formatter: function (value: any, index: any) {
          return value + "%";
        },
      },
      data: diff,
    },
  ],
  series: [
    {
      show: true,
      name: "",
      type: "bar",
      // data: diff,
      data: diff.map((item:any) => ({
        ...item,
        itemStyle: {
          color:
            item.name === "月湖湿地" || item.name === "汉石桥湿地"
              ? {
                  type: "linear",
                  colorStops: [
                    { offset: 0, color: "rgba(184, 233, 134, 1)" },
                    { offset: 1, color: "rgba(115, 222, 88, 0.7)" },
                  ],
                }
              : {
                  type: "linear",
                  colorStops: [
                    { offset: 1, color: "rgba(30, 230, 231, 1)" },
                    { offset: 0, color: "rgba(63, 149, 206, 0.3)" },
                  ],
                },
        },
      })),
      barWidth: 5, // 柱子宽度
      showBackground: true,
      label: {
        show: true,
        width: 200,
        offset: [0, 0],
        color: "rgba(255, 255, 255, 0.6)",
        fontFamily: "SourceHanSansCN-Normal",
        fontSize: 20,
        fontWeight: 500,
        position: "left",
        formatter: function (params: any) {
          return params.data.name;
        },
      },
      itemStyle: {
        show: true,
        barBorderRadius: [10, 10, 10, 10],
        formatter: function (params: any) {
          return params.data.name;
        },
        // color: {
        //     type: "linear",
        //     colorStops: [{ offset: 1, color: "rgba(30, 230, 231, 1)", }, { offset: 0, color: "rgba(63, 149, 206, 0.3)", },],
        // },
      },
      emphasis: { disabled: true },
    },
    {
      name: "",
      type: "scatter",
      emphasis: { scale: false },
      symbol: "rect",
      symbolSize: [3, 15], // 进度条白点
      itemStyle: {
        show: true,
        barBorderRadius: [10, 10, 10, 10],
        color: "#FFF",
        shadowColor: "rgba(255, 255, 255, 0.5)",
        shadowBlur: 5,
        borderWidth: 1,
        opacity: 1,
      },
      z: 2,
      data: diff,
      animationDelay: 500,
    },
  ],
};
  area.value = 3629;
  fgv.value = 50;
  let myChart1 = echarts.init(document.getElementById("zbfgl") as HTMLElement);
  myChart1.setOption(option);
});
</script>

<style lang="less" scoped>
.top {
  width: 100%;
  margin-top: 20px;
  height: 16%;
  padding: 10px 20px 0 20px;
  background-image: url("../../../../assets/image/underGround/text_bk2.png");
  background-size: 100% 100%;
  font-size: 20px;
  letter-spacing: 2px;
  font-family: "OPPOSans-Regular";
  font-weight: 400;
  line-height: 40px;
}
.bottom {
  width: 100%;
  height: 75%;
  display: flex;
}
</style>
